<template>
  <el-dialog
    :title="'相关任务数量:'+taskNum+' ——— 当前任务名:' + taskName"
    :visible.sync="dialogVisible"
    width="65%"
    top="6vh"
    :close-on-click-modal="false"
    :before-close="handleClose"
    @open="createMap"
  >
    <div class="mapBody">
      <div class="leftClick click" @click="switchTask(0)">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div id="dialogContainer"></div>
      <div class="rightClick click" @click="switchTask(1)">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="mergeRequest">选定合并</el-button> 
      <el-popover
      placement="top"
      width="160"
      v-model="smallVisible">
        <el-input
            type="textarea"
            :rows="3"
            placeholder="编辑任务描述"
            v-model="newTaskDescription">
          </el-input>
        <div style="text-align: right; margin: 2px">
          <el-button size="mini" type="primary" plain @click="autoFill">自动填入</el-button>
          <el-button type="primary" size="mini" @click="fromRequestCreateTask">确定</el-button>
        </div>
        <el-button type="primary" slot="reference" >新增任务</el-button>
     </el-popover>
      <el-button type="danger" @click="rejectRequest">拒绝请求</el-button>
      <el-button @click="closeDialog">取 消</el-button>
      <!-- @click="fromRequestCreateTask" -->
    </span>
    

  </el-dialog>
</template>


<script>
import "../css/TaskDialog.css"
import AMapLoader from '@amap/amap-jsapi-loader';
// import { getRequest } from "../utils/api";
import axios from "axios";

  export default {
    data() {
      return {
        newTaskDescription:"",    //新增救援任务时的描述
        smallVisible:true,    //描述小弹窗
        marker:null,     //当前请求的标记点
        circle:null,   //当前任务的圆范围
        map:null,    //当前地图
        myPosition:null,   //父节点传的经纬度
        taskName:"无",   //任务名称
        taskNum:0,   //相关任务数量
        relativeTask:[],  //相关任务数组
        relativeTaskIndex:0   //相关任务当前显示索引
        // dialogVisible: true
      };
    },
     created:function(){
        // console.log("created");
     },
     mounted: function () {
        // console.log("mounted");
    
  },
    methods: {
      autoFill(){
        this.newTaskDescription=this.requestDescription
      },
      closeSmallDialog(){
        this.smallVisible=false
        this.newTaskDescription=""
      },
      initTop(){
        this.taskName="无"
        this.taskNum=0
      },
      switchTask(index){
        //0为左切换，1为又切换
        if(index==0){
            if(this.relativeTaskIndex<=0){
                this.relativeTaskIndex=this.relativeTask.length-1;
            }else{
                this.relativeTaskIndex--;
            }
        }else{
            if(this.relativeTaskIndex>=this.relativeTask.length-1){
                this.relativeTaskIndex=0;
            }else{
                this.relativeTaskIndex++;
            }
        }
         AMapLoader.load({
        }).then((AMap)=>{
          this.map.remove(this.circle)
          this.addCircle(this)
        }).catch(e=>{
            console.log(e);
        })
        //console.log(this.relativeTaskIndex);
      },
      createMap(){
        console.log(this.allTask);
        this.relativeTask=this.allTask
        this.myPosition=this.dialogPosition
        this.initTop()
        // console.log(this.myPosition);
        if(this.map!=null){
            var _this=this //创建指针喽
            AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
                _this.marker=new SimpleMarker({
                iconLabel: 'I',  //可以选中时添加一个标记
                iconTheme: 'numv1',
                //背景图标样式
                iconStyle: 'red',   //红色代表求救者，蓝色代表救援队
                map: _this.map,    //直接设置地图
                position: _this.myPosition,
            });
             //console.log(_this.relativeTaskIndex);
             _this.addCircle(_this)
            })
            
            return;
        }
        AMapLoader.load({
            key:"3be1ca4ff35ba5046d0c188a12e4fae7",    // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.Scale','AMap.ToolBar'] , // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            AMapUI: {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
                },
        }).then((AMap)=>{
            this.map = new AMap.Map("dialogContainer",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式，矢量地图
                zoom:12,           //初始化地图级别
                center:[114.302725,30.556636], //初始化地图中心点位置,经纬度
            });
            this.map.addControl(new AMap.Scale())
            this.map.addControl(new AMap.ToolBar())
            // initAMapUI(); 不需要
            var _this=this //创建指针喽
            AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
                _this.marker=new SimpleMarker({
                iconLabel: 'I',  //可以选中时添加一个标记
                iconTheme: 'numv1',
                //背景图标样式
                iconStyle: 'red',   //红色代表求救者，蓝色代表救援队
                map: _this.map,    //直接设置地图
                position: _this.myPosition,
            }); 
            //console.log(_this.relativeTaskIndex);
            _this.addCircle(_this)
            })
            
            
        }).catch(e=>{
            console.log(e);
        })
      },
      addCircle(_this){
        console.log(_this.relativeTask);
        if(_this.relativeTask.length!=0){
        //上边任务内容
        _this.taskName=_this.relativeTask[_this.relativeTaskIndex].taskDescription
        _this.taskNum=_this.relativeTask.length
        _this.circle=null
        _this.circle = new AMap.Circle({
            center: [_this.relativeTask[_this.relativeTaskIndex].longitude,_this.relativeTask[_this.relativeTaskIndex].latitude],  // 圆心位置
            radius: _this.relativeTask[_this.relativeTaskIndex].taskRange, // 圆半径
            fillColor: '#1791fc',   // 圆形填充颜色
            fillOpacity: 0.2,
            strokeColor: '#fff', // 描边颜色
            strokeWeight: 2, // 描边宽度
            });
        _this.map.add(_this.circle);
        }_this.map.setFitView();  //自适应调整地图，使其包含所有点
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeDialog()
            done();
          })
          .catch(_ => {});
      },
      closeDialog(){
        this.map.clearMap()
        this.closeSmallDialog()
        this.relativeTaskIndex=0;
        this.$emit("changeVisible",false)   
      },
      deleteTheEvent(){
        console.log("删除请求事件");
        this.$emit("deleteEvent")
      },
      rejectRequest(){
        axios.get('/denyRequest?type=flood&requestId='+this.requestId+'&description=这是一个不合理的请求').then((resp) => {
            if (resp.status == 200) {
                this.$message({
                message: '删除成功',
                type: 'success'
                });
                this.deleteTheEvent()
                this.closeDialog()
            }
        },(error)=>{
                this.$message({
                message: error,
                type: 'warning'
                });
                this.closeDialog()
        })
        
      },
      mergeRequest(){
         axios.get('/request/addRequestToTask?requestType=flood&requestId='+this.requestId+'&taskId='+this.relativeTask[this.relativeTaskIndex].taskId).then((resp) => {
            if (resp.status == 200) {
                this.$message({
                message: '合并成功',
                type: 'success'
                });
                this.deleteTheEvent()
                this.closeDialog()
            }
        },(error)=>{
                this.$message({
                message: error,
                type: 'warning'
                });
                this.closeDialog()
        })
      },
      fromRequestCreateTask(){
        axios.get('/createTask?type=flood&requestId='+this.requestId+'&description='+this.newTaskDescription).then((resp) => {
            if (resp.status == 200) {
                this.$message({
                message: '新建任务成功',
                type: 'success'
                });
                this.closeSmallDialog()
                this.deleteTheEvent()
                this.closeDialog()
            }
        },(error)=>{
                this.$message({
                message: error,
                type: 'warning'
                });
                this.closeDialog()
        })
      }
    },
    emits: ["changeVisible"],
    props:["dialogVisible","dialogPosition","allTask","deleteEvent","requestId","requestDescription"]
    }
</script>